import React from 'react';
import { Link } from 'react-router-dom';
import { Breadcrumb } from 'antd';
import breadcrumbNameMap from './breadcrumbNameMap';
import { interceptStr } from '@/utils/utils';
import {
  HeartOutlined,
  SmileOutlined,
  UserAddOutlined,
  UserOutlined,
  TeamOutlined,
} from '@ant-design/icons';

interface IProps {
  // setFormNavigation: (value: string | number) => void;
  props: any;
}

const IconMap = {
  SmileOutlined: <SmileOutlined />,
  HeartOutlined: <HeartOutlined />,
  UserAddOutlined: <UserAddOutlined />,
  UserOutlined: <UserOutlined />,
  TeamOutlined: <TeamOutlined />,
};
const CardBreadcrumb = (props: IProps) => {
  const { location } = props?.props;
  const { routes } = props.props;
  const routeIcon = routes[2].routes[0].routes;

  const pathSnippets = location.pathname.split('/').filter((i) => i);

  const getIcon = () => {
    if (location.pathname) {
      const data = interceptStr(location.pathname);
      let icon = '';
      routeIcon.map((item) => {
        if (item.path == data) {
          icon = item.icon;
        }
        return null;
      });
      return icon;
    }
    return null;
  };
  const icon = getIcon();

  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;

    return (
      <Breadcrumb.Item key={url}>
        <span>{breadcrumbNameMap[url]}</span>
      </Breadcrumb.Item>
    );
  });

  const breadcrumbItems = [
    <Breadcrumb.Item key="home">{icon ? IconMap[icon] : null}</Breadcrumb.Item>,
  ].concat(extraBreadcrumbItems);

  return (
    <>
      <Breadcrumb
        style={{ display: 'flex', marginTop: '16px', marginLeft: '0px' }}
      >
        {breadcrumbItems}
      </Breadcrumb>
    </>
  );
};

export default CardBreadcrumb;
